{% extends "base.html" %}
{% load thumbnail %}
{% load crispy_forms_tags %}
{% load humanize %}
{% load static from staticfiles %}

{% block extra_head %}
<meta property="pageId" content="{{ game.slug }}" />
{% thumbnail game.title_logo "300" as img %}
<link rel='image_src' href="{{img.url}}">
<meta property='og:image' content="{{img.url}}" />
{% endthumbnail %}
<meta property='og:title' content="{{ game.name }}" />
<meta property='og:site_name' content='Wine游戏助手' />
<meta name="title" content="{{ game.name }} - Wine游戏助手" />
<meta name="description" content="{{ game.name }} - Wine游戏助手" />
<meta property="og:description" content="{{ game.name }} - Wine游戏助手" />
<link rel="stylesheet" href="{% static 'installer-issues.css' %}" type="text/css">
{% endblock extra_head %}


{% block title %}{{ game.name }} - Wine游戏助手{% endblock %}

{% block content %}
<div class="page">
  <div class="page-header">
    <div class='title'>
      {% if game.icon %}
        <img src='{{ MEDIA_URL }}{{ game.icon }}' class="icon" />
      {% endif %}
      <span class="ellipse-text">{{ game.name }}</span>
        <div class="buttons">
          <a class="btn" href="{% url 'game-edit' game.slug %}">提出修改建议</a>
          {% if user.is_staff %}
            {% if can_edit and pending_change_subm_count > 0 %}
              <a class="btn" href="{% url 'admin-change-submissions' game.id %}">
                {{ pending_change_subm_count }} pending change
                suggestion{% if pending_change_subm_count > 1 %}s{% endif %}
              </a>
            {% endif %}
            {% if can_publish and not game.is_public %}
              <a class="btn" href="{% url 'game-publish' game_id=game.id %}">发布</a>
            {% endif %}
            {% if can_edit %}
              <a class="btn" href="{% url 'admin:games_game_change' game.id %}">编辑</a>
            {% endif %}
          {% endif %}
        </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-3 col-sm-push-9">
      <div class="game-info">
        {% thumbnail game.title_logo "300" as img %}
          <img src="{{ img.url }}" class="banner" />
        {% endthumbnail %}
        <ul>
          {% if game.genres.count %}
          <li>
            <span class="info-label">类型: </span>
            {% for genre in game.genres.all %}
              {{ genre }}{% if not forloop.last %}, {% endif %}
            {% endfor %}
          </li>
          {% endif %}
          {% if game.platforms.count %}
          <li>
            <span class="info-label">平台: </span>
            {% for platform in game.platforms.all %}
              {{ platform }}{% if not forloop.last %}, {% endif %}
            {% endfor %}
          </li>
          {% endif %}
          {% if game.developer %}
          <li>
            <span class="info-label">开发商: </span>
            <a href="{{ game.developer.get_absolute_url }}">{{ game.developer }}</a>
          </li>
          {% endif %}
          {% if game.publisher %}
          <li>
            <span class="info-label">发行商: </span>
            <a href="{{ game.publisher.get_absolute_url }}">{{ game.publisher }}</a>
          </li>
          {% endif %}
          {% if game.year %}
          <li>
            <span class="info-label">发行年份: </span>
            {{ game.year }}
          </li>
          {% endif %}
          {% if game.website %}
          <li class="ellipse-text">
              <span class="info-label">网站: </span>
              <a href='{{ game.website_url }}'>{{ game.website_url_hr }}</a>
          </li>
          {% endif %}
        </ul>
        <div class="centered">

          <p>已被 {{ game.user_count }} 个用户添加到游戏库</p>
          <p>
            {% if not in_library %}
            <a href="{% url "add_to_library" slug=game.slug %}" class="btn">添加到我的游戏库</a>
            {% else %}
            <a href="{% url "remove_from_library" slug=game.slug %}" class="btn in-library">
              <span>已在我的游戏库</span>
            </a>
            {% endif %}
          </p>
          <p>
            {% if game.steamid or game.gogslug or game.humblestoreid %}
            <span>购买游戏:</span><br/>
            {% endif %}
            {% if game.steamid %}
            <a href="http://store.steampowered.com/app/{{ game.steamid }}"
               title="Steam"
               class='external-link'>
              <img src="{{ STATIC_URL }}images/icons/steam.png" alt="Steam" />
              <span>Steam</span>
            </a>
            {% endif %}
            {% if game.humblestoreid %}
            <a href="https://www.humblebundle.com/store/{{ game.humblestoreid }}" title="Humble Store" class='external-link'>
              <img src="{{ STATIC_URL }}images/icons/humblestore.png" alt="Humble Store" />
              <span>Humble Store</span>
            </a>
            {% endif %}
            {% if game.gogslug %}
            <a href="https://www.gog.com/game/{{ game.gogslug }}" title="GOG.com" class='external-link'>
              <img src="{{ STATIC_URL }}images/icons/gog.png" alt="GOG" />
              <span>GOG</span>
            </a>
            {% endif %}
          </p>
          {% if game.links.count %}
            <p>
              <span>相关链接:</span><br/>
              {% for link in game.links.all %}
              <a href="{{link.url}}" class='external-link'>
                <img src="{{STATIC_URL}}images/icons/{{link.website}}.png" alt="{{link.website}}"/>
                <span>{{link.get_website_display}}</span>
              </a>
              {% endfor %}
              {% if game.steamid %}
              <a href="https://isthereanydeal.com/steam/app/{{ game.steamid }}"
                title="IsThereAnyDeal"
                class='external-link'>
                <img src="{{ STATIC_URL }}images/icons/isthereanydeal.png" alt="IsThereAnyDeal" />
                <span>IsThereAnyDeal</span>
              </a>
              <a href="https://www.protondb.com/app/{{ game.steamid }}"
                title="ProtonDB"
                class='external-link'>
                <img src="{{ STATIC_URL }}images/icons/protondb.png" alt="ProtonDB" />
                <span>ProtonDB</span>
              </a>
              <a href="https://steamdb.info/app/{{ game.steamid }}"
                title="SteamDB"
                class='external-link'>
                <img src="{{ STATIC_URL }}images/icons/steamdb.png" alt="SteamDB" />
                <span>SteamDB</span>
              </a>
              {% endif %}
            </p>
          {% endif %}

          {% for flag in game.flag_labels %}
            <p class='badge'>
             {{flag}}
            </p>
          {% endfor %}
          <p>
          </p>
        </div>
      </div>
    </div>

    <div class="col-sm-9 col-sm-pull-3">
      {% include "includes/screenshots_slider.html" %}
      <div class="screenshots-bar actions-bar">
        <a href='{% url 'screenshot_add' game.slug %}'>上传游戏截图</a>
      </div>
      <div class="installer-list">
        {% if installers %}
        <ul>
          {% for installer in installers %}
            {% include "games/_installer.html" %}
          {% endfor %}
        </ul>
        {% endif %}
        {% if auto_installers %}
        <ul>
          {% for installer in auto_installers %}
            {% include "games/_installer.html" %}
          {% endfor %}
        </ul>
        {% endif %}
        {% if unpublished_installers %}
        <ul id="unpublished-installers" class="hide-unpublished">
          {% for installer in unpublished_installers %}
            {% include "games/_installer.html" %}
          {% endfor %}
        </ul>
        {% endif %}
        <div class="installer-actions actions-bar">
          {% if unpublished_installers %}
            <a href="#" onclick="toggleUnpublishedInstallers(event)">显示尚未发布的安装脚本</a>
          {% endif %}
          <a href="{% url "new_installer" slug=game.slug %}">编写新安装脚本</a>
        </div>
      </div>
      <article>
        {{ game.description|linebreaks }}
      </article>
      <div id="issues">
        <installer-issues slug="{{game.slug}}" user-id="{{user.id|default:""}}"></installer-issues>
      </div>
    </div>
  </div>
  <div class="modal fade" id='installer-issue-modal'>
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">反馈安装脚本或游戏运行问题</h4>
        </div>
        <div class="modal-body">
          <p>
            在此反馈安装过程中遇到的任何问题，比如安装脚本已过时。
            也可以反馈游戏运行过程中遇到的问题，比如打不开、游戏崩溃、功能异常、被误封等。
            反馈游戏问题时，请附带你使用的显卡型号和驱动程序版本。
          </p>
          <p>
            <label for="issue-content">反馈内容:</label>
          </p>
          <textarea id="issue-content" class="issue-content"></textarea>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="issue-submit">提交</button>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://file.winegame.net/static/vue.js/2.6.11/vue.min.js"></script>
<script src="{% static 'installer-issues.umd.min.js' %}"></script>
<script>
  function submitInstallerIssue(event) {
    event.preventDefault();
    var installerSlug = event.target.getAttribute('data-slug');
    var $issueModal = $('#installer-issue-modal');
    $issueModal.attr('data-slug', installerSlug);
    $issueModal.modal();
  }

  function toggleUnpublishedInstallers(event) {
    event.preventDefault();
    var linkText = event.target.innerHTML;
    if (linkText.indexOf('Show') === 0) {
      linkText = linkText.replace('Show', 'Hide');
    } else {
      linkText = linkText.replace('Hide', 'Show');
    }
    event.target.innerHTML = linkText;
    var unpublishedInstallers = document.getElementById('unpublished-installers');
    unpublishedInstallers.classList.toggle('hide-unpublished');
  }
  (function () {
    $("#screenshots").carousel('cycle');

    var issueSubmit = document.getElementById('issue-submit');
    issueSubmit.addEventListener('click', function (event) {

      var issueModal = document.getElementById('installer-issue-modal');
      var issueContent = document.getElementById('issue-content');
      var issueData = {
        content: issueContent.value,
        installer: issueModal.getAttribute('data-slug')
      };
      $.ajax({
        url: "{% url "game-submit-issue" %}",
        method: "POST",
        data: issueData,
        dataType: "json",
        success: function (response) {
          if(response.status === 'error') {
            alert('提交失败: ' + response.message);
          } else {
            issueContent.value = "";
            $('#installer-issue-modal').modal('toggle');
            alert("感谢您的反馈");
          }
        }
      })
    });
  })();
</script>

{% endblock %}
